<template>
  <view>
    <!-- 作业票启动 -->
    <view class="status-container">
      <uni-forms ref="form" labelWidth="70vw" labelPosition="top">
        <uni-forms-item required label="处理原因">
          <textarea
            v-model="reason"
            class="text-area"
            placeholder="简要说明原因"
            placeholder-class="form-placeholder__style"
            maxlength="50"
          />
        </uni-forms-item>
      </uni-forms>
    </view>
    <view class="submit_btn">
      <view class="button-confirm" @click="handleSubmit('2')">启动</view>
      <view class="button-confirm button-invalid mt-30" @click="handleSubmit('3')">作废作业票</view>
    </view>
  </view>
</template>

<script>
import CuRadioGroup from '@/components/cu-radio-group/cu-radio-group.vue'
import { updateTicketPauseStatus } from '@/api/spw/ticketPerform.js'
export default {
  components: {
    CuRadioGroup
  },
  async onLoad(option) {
    const { ticketId } = option
    this.ticketId = ticketId
  },
  data() {
    return {
      saveLoading: false,
      reason: ''
    }
  },
  methods: {
    async handleSubmit(pause) {
      if (this.reason === '') {
        this.$modal.showToast('请填写原因')
        return
      }
      if (this.saveLoading) {
        return
      }
      this.saveLoading = true
      await updateTicketPauseStatus({
        reason: this.reason,
        ticketId: this.ticketId,
        pause
      }).finally(() => {
        this.saveLoading = false
      })
      this.$modal.showToast('操作成功')
      const eventChannel = this.getOpenerEventChannel()
      eventChannel.emit('callback:success', { data: true })
      uni.navigateBack()
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .pause-radio__group.cu-radio-group .cu-radio-item {
  margin-bottom: 30rpx;
  &:last-child {
    margin-bottom: 0;
  }
}
.status-container {
  margin-top: 24rpx;
  background: #fff;
  padding: 30rpx;
  margin-bottom: 100rpx;
}

.submit_btn {
  padding: 0 75rpx;
  margin-bottom: 100rpx;
  .button-confirm {
    height: 100rpx;
    line-height: 100rpx;
    background: #454a5e;
    border-radius: 50rpx;
    font-size: 36rpx;
    color: #ffffff;
    text-align: center;
    &.button-invalid {
      background: transparent;
      border: 1rpx solid #454a5e;
      color: #454a5e;
    }
  }
}
</style>
